<template>
  <div class="echarts" ref="chartRef"></div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echarts from "echarts";

type EChartsOption = echarts.EChartsOption;

let chart: echarts.ECharts;
let chartRef = ref();

onMounted(() => {
  chart = echarts.init(chartRef.value);
  chart.setOption(option);
});

const props = defineProps({
  data: {
    type: Array,
    required: true
  }
})

const option: EChartsOption = {
  dataset: {
    source: props.data as Array<any>[]
  },
  grid: {
    top: '12%',
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    name: 'amount',
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    }
  },
  yAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#fff'
      }
    }
  },
  series: [
    {
      label: {
        show: true,
        position: 'outside',
        color: 'white',
        offset: [20, 0]
      },
      type: 'bar',
      barWidth: '40%',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
            0, 1, 0, 0, [{//只要修改前四个参数就ok
              offset: 0,
              color: '#c70a0a'
            }, //柱图渐变色
              {
                offset: 1,
                color: '#e8ad1a'
              }
            ]
        ),
      }
    }
  ]
};
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 250px;
}
</style>
